﻿@inherits LayoutComponentBase

<PageTitle>BootstrapBlazor</PageTitle>

<div class="bd-layout" data-bs-theme="@ThemeType">
    <BootstrapNavbar @ref="@_navbar" ExpandBreakpoint="@Size.lg" IsDarkBg Placement="@NavbarPlacement.StickyTop"
        Style="background-color:#712cf9;box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15), inset 0 -1px 0 rgba(255,255,255,0.15);">
        <BootstrapNavbarToggler OnClick="@ToggleMenu" />
        <BootstrapNavbarBrand Href="">BootstrapBlazor</BootstrapNavbarBrand>
        <BootstrapNavbarToggler OnClick="@(_=>showNavMenu=!showNavMenu)">
            <svg width="24" height="24" viewBox="0 0 16 16" fill="currentColor">
                <path
                    d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z">
                </path>
            </svg>
        </BootstrapNavbarToggler>
        <BootstrapNavbarCollaspeNav AutoClose @bind-Show="@showNavMenu">
            <BootstrapNavItem Class="mx-3">
                <BootstrapCheckbox IsSwitch Label="@ThemeType" Value="@darkTheme" ValueChanged="@OnThemeChanged" />
            </BootstrapNavItem>
            <BootstrapNavItem Class="mx-3" Href="https://github.com/gaofen13/bootstrap-blazor/">About</BootstrapNavItem>
        </BootstrapNavbarCollaspeNav>
    </BootstrapNavbar>
    <div class="w-100 d-flex bd-container">
        <BootstrapOffcanvas @bind-Show="@showMenu" ShowBackdrop="@ShowBackdrop" ShowCloseButton="@ShowBackdrop"
            Class="bd-offcanvas" Style="@($"top:{OffcanvasTop};height:{OffcanvasHeight}")">
            <BootstrapSwipeArea OnSwipe="@OnSwipeOffcanvas">
                <NavMenu />
            </BootstrapSwipeArea>
        </BootstrapOffcanvas>

        <main class="w-100 p-3">
            <BootstrapErrorBoundary>
                @Body
            </BootstrapErrorBoundary>
        </main>
    </div>

    <BootstrapToastContainer GlobalOptions="new ToastOptions{ AutoClose = true }" />
    <BootstrapModalContainer GlobalOptions="new ModalOptions{ ShowCloseBtn = true }" />
</div>
